<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <div class="inquire">
          <div class="inquire">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="姓名">
                <el-input
                  v-model="Inline.key"
                  placeholder="居民姓名"
                  class="name"
                ></el-input>
              </el-form-item>
              <el-form-item label="园区姓名">
                <el-input
                  v-model="Inline.key"
                  placeholder="居民电话"
                  class="phone"
                ></el-input>
              </el-form-item>
              <el-form-item label="房间号">
                <el-input
                  v-model="Inline.key"
                  placeholder="房间号"
                  class="room"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input
                  v-model="Inline.key"
                  placeholder="联系方式"
                  class="room"
                ></el-input>
              </el-form-item>
              <el-form-item label="账期">
                <el-input
                  v-model="Inline.key"
                  placeholder="账期"
                  class="room"
                ></el-input>
              </el-form-item>
              <el-form-item label="添加人">
                <el-input
                  v-model="Inline.key"
                  placeholder="添加人"
                  class="room"
                ></el-input>
              </el-form-item>
              <el-form-item label="流水单号">
                <el-input
                  v-model="Inline.key"
                  placeholder="流水单号"
                  class="room"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getlist">查询</el-button>
                <el-button type="primary" @click="getlist">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="fun">
            <el-button type="primary" @click="addShow(true)">添加</el-button>

            <el-button type="success" @click="deleteall">批量删除</el-button>
          </div>
          <Table
            :loading="loading"
            :tableData="tableData"
            :tableHead="tableHead"
            @updateNotice="addShow"
            @deleteNotice="deleteNotice"
            @multipleSelection="multipleSelection"
          />
          <page :total="counts" @changpage="getlist" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { feeList } from "../api/fee";
import Table from "../components/common/Table.vue";
import page from "../components/common/page1.vue";
import http from "../utils/request";
export default {
  components: {
    Table,
    page
  },
  data() {
    return {
      activeName: "first",
      loading: false,
      tableData: [],
      formInline: {},
      tableHead: [
        {
          label: "ID",
          prop: "id",
        },

        {
          label: "姓名",
          prop: "userName",
        },
        {
          label: "楼栋",
          prop: "building",
        },

        {
          label: "房号",
          prop: "houseno",
        },
        {
          label: "联系方式",
          prop: "mobile",
        },
        {
          label: "缴费类型",
          prop: "type",
        },
        {
          label: "账期",
          prop: "orderno",
        },

        {
          label: "应缴金额（元）",
          prop: "price",
        },

        {
          label: "导入时间",
          prop: "begindate",
        },
        {
          label: "添加者",
          prop: "admin",
        },
        {
          label: "状态",
          prop: "stateName",
        },
        {
          label: "操作",
          type: "button",
          button: {
            update: true,
            delete: true,
          },
        },
      ],
      multipleSelectionArr: [],
      Inline: {
        psize: 8,
        page: 1,
        key: "",
      },
      counts: 0,
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    async getlist() {
      let res = await feeList({ params: this.Inline });
      console.log(res);
      this.tableData = res.data.list;
      this.counts = res.data.counts;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    deleteall() {},
    addShow() {},
    deleteNotice(id) {
       let ids = id.id
        http.get("/api/fee/delete?id=" + ids).then((res) => {
        console.log(res);
        console.log(id);
        if (res.errCode === 10000) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getlist();
        }
      });
    },
    multipleSelection() {},
    handleSizeChange(val) {
      this.Inline.psize = val;
      console.log(this.Inline.psize);
      this.getlist();
    },
    handleCurrentChange(val) {
      this.Inline.page = val;
      this.getlist();
    },
  },
};
</script>

<style>
</style>